<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册登录</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        #app {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        #loginform, #registerform {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 300px;
            text-align: center;
        }

        h1 {
            margin-bottom: 20px;
            color: #333333;
        }

        div {
            margin-bottom: 15px;
        }

        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #cccccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            border: none;
            border-radius: 4px;
            color: #ffffff;
            font-size: 16px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        label {
            display: block;
            margin-top: 10px;
        }

        input[type="checkbox"], input[type="radio"] {
            margin-right: 5px;
        }

        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #cccccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        a {
            color: #007bff;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<div id="app">
    <div id="loginform" v-if="!islogin && !isRegistering">
        <h1>用户登录</h1>
        <div>用户名:<input type="text" v-model="username" /></div>
        <div>密码:<input type="password" v-model="password"/></div>
        <div><button @click="login">登录</button></div>
        <div><button @click="toggleRegister">注册</button></div>
    </div>
    <div id="registerform" v-if="!islogin && isRegistering">
        <h1>用户注册</h1>
        <div>用户名:<input type="text" v-model="registerUsername" /></div>
        <div>密码:<input type="password" v-model="registerPassword"/></div>
        <div>重复密码:<input type="password" v-model="confirmPassword"/></div>
        <div>性别:
            <label><input type="radio" v-model="gender" value="male"> 男</label>
            <label><input type="radio" v-model="gender" value="female"> 女</label>
        </div>
        <div>年龄:
            <label><input type="checkbox" v-model="age" value="18-25"> 18-25</label>
            <label><input type="checkbox" v-model="age" value="26-35"> 26-35</label>
            <label><input type="checkbox" v-model="age" value="36-45"> 36-45</label>
        </div>
        <div>爱好:
            <label><input type="checkbox" v-model="hobbies" value="reading"> 阅读</label>
            <label><input type="checkbox" v-model="hobbies" value="traveling"> 旅行</label>
            <label><input type="checkbox" v-model="hobbies" value="gaming"> 游戏</label>
        </div>
        <div>学历:
            <select v-model="education">
                <option value="">请选择</option>
                <option value="highschool">高中</option>
                <option value="college">大专</option>
                <option value="bachelor">本科</option>
                <option value="master">硕士</option>
                <option value="phd">博士</option>
            </select>
        </div>
        <div>
            <label>
                <input type="checkbox" v-model="agreeToTerms" />
                我同意<a href="#">服务条款</a>和<a href="#">隐私政策</a>
            </label>
        </div>
        <div><button @click="register">注册</button></div>
        <div><button @click="toggleRegister">返回登录</button></div>
    </div>
    <div v-if="islogin">
        {{username}}已登录<br />
        <div><button @click="logout">登出</button></div>
    </div>
</div>

<script>
    var app = Vue.createApp({
        data() {
            return {
                username: '',
                password: '',
                registerUsername: '',
                registerPassword: '',
                confirmPassword: '',
                gender: '',
                age: [],
                hobbies: [],
                education: '',
                agreeToTerms: false,
                islogin: false,
                isRegistering: false
            }
        },
        methods: {
            login() {
                console.log("login");
                if (this.username === "admin" && this.password === "123") {
                    alert("登录成功");
                    this.islogin = true;
                } else {
                    alert("登录失败");
                }
            },
            register() {
                console.log("register");
                if (this.registerPassword !== this.confirmPassword) {
                    alert("密码不一致");
                    return;
                }
                if (!this.agreeToTerms) {
                    alert("请同意服务条款和隐私政策");
                    return;
                }
                if (this.registerUsername === "admin" && this.registerPassword === "123") {
                    alert("注册成功");
                    this.islogin = true;
                    this.username = this.registerUsername;
                } else {
                    alert("注册失败");
                }
            },
            logout() {
                this.islogin = false;
            },
            toggleRegister() {
                this.isRegistering = !this.isRegistering;
            }
        }
    });

    var vm = app.mount("#app");
</script>
</body>
</html>